<template>
  <div class="box">
    <!-- <el-form :model="form" label-width="auto" style="max-width: 600px">
      <el-form-item label="username">
        <el-input v-model="form.name" />
      </el-form-item>

      <el-form-item label="passward" style="color: black;">
        <el-input v-model="form.region" /> -->
    <!-- <el-select v-model="form.region" placeholder="please select your zone">
          <el-option label="Zone one" value="shanghai" />
          <el-option label="Zone two" value="beijing" />
        </el-select>-->
    <!-- </el-form-item>

      
      <el-form-item>
        <el-button type="primary" @click="onSubmit">Login</el-button>
        <el-button>Cancel</el-button>
      </el-form-item>
    </el-form> -->

    <el-card style="max-width: 480px">
      <template #header>
        <div class="card-header"><span>username</span><el-input v-model="RuleForm.name" /></div>
      </template>
      <span>passward</span><el-input v-model="RuleForm.password" />
      <template #footer>
        <el-button type="primary" @click="onSubmit">Login</el-button>
        <el-button>Cancel</el-button>
      </template>
    </el-card>
  </div>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { userlogin } from '../Api/user'
import router  from '../router'
import axios from 'axios'
// do not use same name with ref
interface RuleForm {
  name: string
  password: string
}
const RuleForm = ref<RuleForm>({
  name: '',
  password: ''
})
let token = ref('')
function onSubmit() {
   userlogin(RuleForm.value.name, RuleForm.value.password).then((r) => {
    console.log(r.data)
    token.value = r.data.data.token
    localStorage.setItem('admin-token', token.value)
    console.log(token.value);
    console.log(r.data.code);
    
    if(r.data.code == 200) {
       router.push('/home')
    }
  })
}
//   const onSubmit = () => {
//     console.log('submit!')
//   }
</script>
<style scoped lang="scss">
.box {
  background-image: url('https://tse4-mm.cn.bing.net/th/id/OIP-C.tOWI_3vES08Q5qSyepomcgHaQd?w=157&h=350&c=7&r=0&o=5&dpr=1.1&pid=1.7');
  height: 100%;
  display: flex;
  .el-card {
    margin-left: calc(50% - 150px);
    height: 400px;
    width: 300px;
  }
}
</style>
